<template>
  <div class="import_list">
    <el-dialog
      title="报名名单"
      :visible.sync="dialogVisible"
      size="small" @close="handleCancel">
      <div class="class_list">
        <el-row>
          <el-col :span="9">报名课程：{{this.data.trainCourseName}}</el-col>
          <el-col :span="9">校区：{{this.data.schoolName}}</el-col>
          <el-col :span="6">班别：{{this.data.classType}}</el-col>
        </el-row>
      </div>
      <p>请选择要安排进该班的学员，已选<span style="color:#df9120">{{selectStudents.length}}</span>人</p>
      <el-scrollbar class="import_table" wrap-class="student_scroll">
        <el-table ref="multipleTable" :data="studentData" stripe tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" v-loading="studentData===null">
          <el-table-column type="selection" align="center" width="35">
          </el-table-column>
          <el-table-column label="报名时间" align="center" width="130" show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.signUpTime && new Date(scope.row.signUpTime).format()}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="报名来源" width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              {{['平台报名','后台录入'][scope.row.signSource]}}
            </template>
          </el-table-column>
          <el-table-column prop="name" align="center" label="姓名" width="150" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="性别" align="center" width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              {{['','男','女'][scope.row.sex]}}
            </template>
          </el-table-column>
          <el-table-column prop="nationality" align="center" label="国籍" width="100" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="address" label="住址" show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </el-scrollbar>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="loading" @click="handleSubmit" :disabled="!selectStudents.length > 0">确 定</el-button>
        <el-button @click="handleCancel">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import trainApi from 'api/train'
export default {
  props: {
    data: Object
  },
  created () {
    trainApi.studentSignUp({
      classesId: this.data.classesId,
      courseId: this.data.courseId,
      schoolId: this.data.schoolId,
      rows: 1000
    }).then((res) => {
      this.studentData = res.data.list
    })
  },
  data () {
    return {
      loading: false,
      dialogVisible: true,
      selectStudents: [],
      studentData: null
    }
  },
  methods: {
    handleCancel () { // 取消
      this.$emit('input', false)
    },
    handleSubmit () { // 发起请求
      let array = this.selectStudents.map(item => {
        return item.id
      })
      // this.$emit('success', array)
      trainApi.importStudent(JSON.stringify({studentSignupId: array, classId: this.$route.query.id}), {context: this}).then(() => {
        this.$emit('input', false).$emit('success')
      })
    },
    handleSelectionChange (val) { // 选中
      this.selectStudents = val
    }
  }
}
</script>
<style lang="scss">
.student_scroll{
  max-height:430px;
  overflow-y: scroll;
}
.import_list{
  .el-dialog--small{
    min-width:1000px;
  }
  .el-col{
    margin:0 0 22px 0;
  }
  .class_list{
    color:#00bb90;
    font-weight:bold;
    line-height:1.3;
    .el-col{
      padding:0 5px 0 0;
    }
  }
  .el-dialog__body{
    padding-bottom:0;
  }
  .import_table{
    margin:10px 0 20px 0;
    .el-checkbox{
      margin:0;
    }
    .el-table .cell{
      font-size:12px;
      padding:0 10px;
    }
  }
}
</style>
